<template>
  <div class="md-template-editor">
    <div class="editor-container">
      <div class="md-toolbar">
        <Toolbar ref="toolbar" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      </div>
      <div class="md-editor">
        <Editor :style="{ 'height': height }" v-model="html" :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange" @onBlur="onBlur" />
      </div>
    </div>
  </div>
</template>

<script>
// 官网：https://www.wangeditor.com
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import httpService from '@/ddd/http.service'
import { mdLocalFileDomain } from '@/ddd/config.service.js'
import { _dataEncryption } from '@/ddd/encryption.service.js'
import { Message } from 'element-ui'
export default {
  name: 'MdEditorBaseComponent',
  components: {
    Editor, Toolbar
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入内容...'
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data () {
    return {
      editor: null,
      html: '',
      toolbarConfig,
      editorConfig,
      mode: 'default' // or 'simple'
    }
  },
  watch: {
    value: {
      handler (val) {
        this.html = val
      },
      deep: true,
      immediate: true
    },
    placeholder: {
      handler (val) {
        this.editorConfig.placeholder = val
      },
      deep: true,
      immediate: true
    }
  },
  mounted () {
    // 模拟 ajax 请求，异步渲染编辑器
    this.$nextTick(() => {
      this.editorConfig.placeholder = this.placeholder
      this.html = this.value
    })
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated (editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange (editor) {
      this.$emit('input', editor.getHtml())
    },
    onBlur (editor) {
      this.$emit('blur', editor.getHtml())
    }
  }
}

const editorConfig = {
  placeholder: '',
  readOnly: false,
  autoFocus: true,
  scroll: true,
  MENU_CONF: {
    'uploadImage': {
      // 自定义图片上传
      async customUpload (file, insertFn) {
        const formData = new FormData()
        formData.append('file', file)

        const signModel = _dataEncryption(file)

        formData.append('merchantId', signModel.merchantId)
        formData.append('ip', signModel.ip)
        formData.append('mac', signModel.mac)
        formData.append('isValid', signModel.isValid)
        formData.append('version', signModel.version)
        formData.append('timesTamp', signModel.timesTamp)
        formData.append('token', signModel.token)
        formData.append('sign', signModel.sign)

        const res = await httpService.post('/util/upload/localSingle', formData)

        if (res.code !== '200') {
          Message.error(res.msg)
          return
        }

        const url = `${mdLocalFileDomain}/${res.data.localFilePath}`

        console.log(url)

        insertFn(url)
      }
    },
    'uploadVideo': {
      // 自定义视频上传
      async customUpload (file, insertFn) {
        const formData = new FormData()
        formData.append('file', file)

        const signModel = _dataEncryption(file)

        formData.append('merchantId', signModel.merchantId)
        formData.append('ip', signModel.ip)
        formData.append('mac', signModel.mac)
        formData.append('isValid', signModel.isValid)
        formData.append('version', signModel.version)
        formData.append('timesTamp', signModel.timesTamp)
        formData.append('token', signModel.token)
        formData.append('sign', signModel.sign)

        const res = await httpService.post('/util/upload/localSingle', formData)

        if (res.code !== '200') {
          Message.error(res.msg)
          return
        }

        const url = `${mdLocalFileDomain}/${res.data.localFilePath}`

        console.log(url)

        insertFn(url)
      }
    }
  }
}

const toolbarConfig = {
  // toolbarKeys: [
  //   "undo",
  //   "redo",
  //   "clearStyle",
  //   "fontSize",
  //   {
  //     "key": "group-h",
  //     "title": "h",
  //     "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 512v384c0 35.4 28.6 64 64 64s64-28.6 64-64V128c0-35.4-28.6-64-64-64s-64 28.6-64 64v256H256V128c0-35.4-28.6-64-64-64S128 92.6 128 128v768c0 35.4 28.6 64 64 64s64-28.6 64-64V512h512z\"></path></svg>",
  //     "menuKeys": [
  //       "header1",
  //       "header2",
  //       "header3",
  //     ]
  //   },
  //   "bold",
  //   {
  //     "key": "group-list",
  //     "title": "list",
  //     "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M384 64h640v128H384V64z m0 384h640v128H384v-128z m0 384h640v128H384v-128zM0 128a128 128 0 1 1 256 0 128 128 0 0 1-256 0z m0 384a128 128 0 1 1 256 0 128 128 0 0 1-256 0z m0 384a128 128 0 1 1 256 0 128 128 0 0 1-256 0z\"></path></svg>",
  //     "menuKeys": [
  //       "bulletedList",
  //       "numberedList"
  //     ]
  //   },
  //   "divider",
  //   "blockquote",
  //   {
  //     "key": "group-justify",
  //     "title": "justify",
  //     "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
  //     "menuKeys": [
  //       "justifyLeft",
  //       "justifyRight",
  //       "justifyCenter",
  //       "justifyJustify"
  //     ]
  //   },
  //   {
  //     "key": "group-more",
  //     "title": "more",
  //     "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
  //     "menuKeys": [
  //       "underline",
  //       "italic",
  //       "through",
  //       "color",
  //       "bgColor",
  //       "todo",
  //       "insertVideo",
  //       "codeBlock"
  //     ]
  //   }
  // ]
}
</script>

<style lang="less" scoped>
.md-template-editor {
  width: 100%;
  box-sizing: border-box;
  position: relative;

  .editor-container {
    position: relative;
    .md-toolbar {
      border: 1px solid #efefef;
      ::v-deep .w-e-toolbar {
        padding: 0px !important;
        .w-e-bar-item {
          padding: 0px !important;
          button {
            padding: 0px 7px !important;
          }
        }
      }
    }

    .md-editor {
      border: 1px solid #efefef;
      border-top: none !important;
    }
  }
}
</style>